<template>
  <div class="container">
    <div class="header">
      <el-input v-model="key" class="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="searchDocArchives" v-loading="load.list">搜索</el-button>
      <span @click="isHidden = !isHidden" style="margin-left:5px;s">高级搜索</span>
    </div>
    <div class="advanced-query" v-if="isHidden">
      <div class="advanced-query-form">
        <div class="input-form">
          <div class="input-form-label">公文标题:</div>
          <div class="input-form-input">
            <el-input v-model="docType" placeholder="请输入内容" class="input-form-in"></el-input>
          </div>
        </div>
        <div class="input-form">
          <div class="input-form-label">公文种类:</div>
          <div class="input-form-input">
            <span :class="{'spanbg':spantype==1}" @click="openType(1)">全部</span>
            <span :class="{'spanbg':spantype==2}" @click="openType(2)">指定公文种类</span>
            <el-input
              disabled
              v-model="typeName"
              placeholder="请输入内容"
              v-show="spantype == 2"
              suffix-icon="el-icon-search"
              class="input-form-in"
            ></el-input>
          </div>
        </div>
        <div class="input-form">
          <div class="input-form-label">主题分类:</div>
          <div class="input-form-input">
            <span :class="{'spanbg':spancategory==1}" @click="openTopic(1)">全部</span>
            <span :class="{'spanbg':spancategory==2}" @click="openTopic(2)">指定主题分类</span>
            <el-input
              disabled
              v-model="topicName"
              placeholder="请输入内容"
              v-show="spancategory == 2"
              suffix-icon="el-icon-search"
              class="input-form-in"
            ></el-input>
          </div>
        </div>
        <div class="input-form">
          <div class="input-form-label">发文字号:</div>
          <div class="input-form-input">
            <el-input v-model="wordNum" placeholder="请输入内容" class="input-form-in"></el-input>
          </div>
        </div>
        <div class="input-form">
          <div class="input-form-label">成文日期:</div>
          <div class="input-form-input">
            <span :class="{'spanbg':spantime==1}" @click="clickSpanTime(1)">全部</span>
            <span :class="{'spanbg':spantime==2}" @click="clickSpanTime(2)">今天</span>
            <span :class="{'spanbg':spantime==3}" @click="clickSpanTime(3)">本周</span>
            <span :class="{'spanbg':spantime==4}" @click="clickSpanTime(4)">本月</span>
            <span :class="{'spanbg':spantime==5}" @click="clickSpanTime(5)">上个月</span>
            <span :class="{'spanbg':spantime==6}" @click="clickSpanTime(6)">本季</span>
            <span :class="{'spanbg':spantime==7}" @click="clickSpanTime(7)">本年</span>
            <span :class="{'spanbg':spantime==8}" @click="clickSpanTime(8)">上一年</span>

            <span :class="{'spanbg':spantime==9}" @click="clickSpanTime(9)">指定日期范围</span>
            <el-date-picker
              class="input-form-in"
              v-show="spantime == 9"
              v-model="selectTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
        <div class="input-form">
          <div class="input-form-label">阅读状态:</div>
          <div class="input-form-input">
            <span :class="{'spanbg':spanstatus==1}" @click="spanstatus = 1">全部</span>
            <span :class="{'spanbg':spanstatus==2}" @click="spanstatus = 2">已读</span>
            <span :class="{'spanbg':spanstatus==3}" @click="spanstatus = 3">未读</span>
          </div>
        </div>
      </div>
      <div class="advanced-query-tail">
        <el-button type="primary" @click="searchDocArchives">搜索</el-button>
        <el-button  @click="reset">重置</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="docArchives"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-loading="load.list"
      >
        <el-table-column prop="typeName" label="公文种类" sortable width="180">
          <template slot-scope="scope">
            <div v-show="scope.row.typeName !== '' &&  scope.row.typeName !== null">
               <el-tag  type="primary" disable-transitions>{{scope.row.typeName}}</el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="docTitle" label="公文标题"></el-table-column>
        <el-table-column prop="wordNum" label="发文字号" sortable width="180"></el-table-column>
        <el-table-column prop="signer" label="签发人"></el-table-column>
        <el-table-column prop="writtenDate" label="成文日期" sortable width="180"></el-table-column>
        <el-table-column prop="dispatchDate" label="印发日期" sortable width="180"></el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog title="公文种类分类" :visible.sync="typeVisible" width="50%">
      <el-table
        :data="docTypes"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-loading="load.list"
        @row-click="clickDocTypeRow"
      >
        <el-table-column prop="typeName" label="名称" sortable width="180"></el-table-column>
        <el-table-column prop="typeRemark" label="描述"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleTypeSizeChange"
        @current-change="handleTypeCurrentChange"
        :current-page="typePageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="typePageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="typePageInfo.total"
      ></el-pagination>
    </el-dialog>
    <el-dialog title="公文主题分类" :visible.sync="topicVisible" width="50%">
      <el-table
        :data="docTopics"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-loading="load.list"
        @row-click="clickDocTopicRow"
      >
        <el-table-column prop="topicName" label="名称" sortable width="180"></el-table-column>
        <el-table-column prop="topicRemark" label="描述"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleTopicSizeChange"
        @current-change="handleTopicCurrentChange"
        :current-page="topicPageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="topicPageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="topicPageInfo.total"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import {
  listDocArchive,
  selectEightDocArchive
} from "@/api/mdp/arc/doc/docArchive";
import { listDocType } from "@/api/mdp/arc/doc/docType";
import { listDocTopic } from "@/api/mdp/arc/doc/docTopic";
import {
  getCurrentDate,
  getCurrentWeek,
  getCurrentMonth,
  getPreviousMonth,
  getCurrentSeason,
  getCurrentYear,
  getPreviousYear
} from "./getTime";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      pageInfo: {
        //分页数据
        total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10, //每页数据
        count: false, //是否需要重新计算总记录数
        pageNum: 1, //当前页码、从1开始计算
        orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
      //种类分类分页数据
      typePageInfo: {
        //分页数据
        total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10, //每页数据
        count: false, //是否需要重新计算总记录数
        pageNum: 1, //当前页码、从1开始计算
        orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
      //主题分类分页数据
      topicPageInfo: {
        //分页数据
        total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10, //每页数据
        count: false, //是否需要重新计算总记录数
        pageNum: 1, //当前页码、从1开始计算
        orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },

      load: { list: false, edit: false, del: false, add: false }, //查询中...
      docArchives: [],
      key: "", //根据公文标题模糊查询
      isHidden: false,
      input: "",
      spantype: 1, //公文种类
      spancategory: 1, //主题分类
      spantime: 1, //成文日期
      spanstatus: 1, //阅读状态
      typeVisible: false,
      topicVisible: false,
      docTypes: [], //公文种类分类
      docTopics: [], //公文主题分类
      docType: "",
      typeName: "",
      topicName: "",
      wordNum: "",
      startTime: "",
      selectTime: "", //时间选择器选择的时间
      endTime: "",
      value1: "",
      docId: "",
      //公文查询条件
    };
  },
  created() {
    this.key = this.$route.query.key;
    // this.docType = this.$route.query.docTitle;
    // this.typeName = this.$route.query.docType;
    // this.topicName = this.$route.query.topicName;

    this.startTime = this.$route.query.startTime;
    this.endTime = this.$route.query.endTime;
    this.wordNum = this.$route.query.wordNum;
    this.docId = this.$route.query.docId;
    this.docType = this.$route.query.docType;
    //获取路由参数
    this.topicId = this.$route.query.topicId;

    this.getDocArchives();
  },




  methods: {
    handleSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.getDocArchives();
    },
    handleCurrentChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.getDocArchives();
    },
    //分页查询公文
    getDocArchives() {
      let params = {
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
        total: this.pageInfo.total,
        count: this.pageInfo.count,
        // docTitle: this.docType,
        docType: this.docType,
        // topicName: this.topicName,
        topicId: this.topicId,
        startTime: this.startTime,
        endTime: this.endTime,
        wordNum: this.wordNum,
        branchId: this.userInfo.branchId,
        key : this.key,
        docId: this.docId
      };
      this.load.list = true;
      listDocArchive(params)
        .then(res => {
          var tips = res.data.tips;
          if (tips.isOk) {
            this.pageInfo.total = res.data.total;
            this.pageInfo.count = false;
            this.isHidden = false;
            this.docArchives = res.data.data;
          } else {
            this.$message({ message: tips.msg, type: "error" });
          }
          this.load.list = false;
        })
        .catch(err => (this.load.list = false));
    },
    //搜索公文
    searchDocArchives() {
      this.pageInfo.count = true;
      this.getDocArchives();
    },
    //打开种类分类弹框
    openType(type) {
      this.spantype = type;
      if (type == 2) {
        this.typeVisible = true;
        this.getDocTypes();
      } else {
        this.typeName = "";
      }
    },
    //打开主题分类弹框
    openTopic(type) {
      this.spancategory = type;
      if (type == 2) {
        this.topicVisible = true;
        this.getDocTopic();
      } else {
        console.log("sadsdsds");
        this.topicName = "";
      }
    },
    //分页查种类分类
    getDocTypes() {
      let params = {
        pageSize: this.typePageInfo.pageSize,
        pageNum: this.typePageInfo.pageNum,
        total: this.typePageInfo.total,
        count: this.typePageInfo.count,
        branchId: this.userInfo.branchId
      };
      this.load.list = true;
      listDocType(params)
        .then(res => {
          var tips = res.data.tips;
          if (tips.isOk) {
            this.typePageInfo.total = res.data.total;
            this.typePageInfo.count = false;
            this.docTypes = res.data.data;
          } else {
            this.$message({ message: tips.msg, type: "error" });
          }
          this.load.list = false;
        })
        .catch(err => (this.load.list = false));
    },
    handleTypeSizeChange(pageSize) {
      this.typePageInfo.pageSize = pageSize;
      this.getDocTypes();
    },
    handleTypeCurrentChange(pageNum) {
      this.typePageInfo.pageNum = pageNum;
      this.getDocTypes();
    },
    //选中一行种类分类
    clickDocTypeRow(row) {
      console.log(JSON.stringify(row));
      this.typeName = row.typeName;
      this.typeVisible = false;
    },
    //分页查主题分类
    getDocTopic() {
      let params = {
        pageSize: this.topicPageInfo.pageSize,
        pageNum: this.topicPageInfo.pageNum,
        total: this.topicPageInfo.total,
        count: this.topicPageInfo.count,
        branchId: this.userInfo.branchId
      };
      this.load.list = true;
      listDocTopic(params)
        .then(res => {
          var tips = res.data.tips;
          if (tips.isOk) {
            this.topicPageInfo.total = res.data.total;
            this.topicPageInfo.count = false;
            this.docTopics = res.data.data;
          } else {
            this.$message({ message: tips.msg, type: "error" });
          }
          this.load.list = false;
        })
        .catch(err => (this.load.list = false));
    },
    handleTopicSizeChange(pageSize) {
      this.topicPageInfo.pageSize = pageSize;
      this.getDocTopic();
    },
    handleTopicCurrentChange(pageNum) {
      this.topicPageInfo.pageNum = pageNum;
      this.getDocTopic();
    },
    //选中一行种类分类
    clickDocTopicRow(row) {
      this.topicName = row.topicName;
      this.topicVisible = false;
    },
    //重置
    reset() {
      this.docType = this.typeName = this.topicName = this.wordNum = this.startTime = this.selectTime = this.endTime =
        "";
    },
    //取消
    cancel() {
      this.docType = this.typeName = this.topicName = this.wordNum = this.startTime = this.selectTime = this.endTime =
        "";
      this.isHidden = false;
    },
    //选择时间
    clickSpanTime(index) {
      if (index == 1) {
        this.spantime = 1;
        this.startTime = this.endTime = "";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 2) {
        this.spantime = 2;
        var today = new Date();
        var datetime =
          today.getFullYear() +
          "-" +
          (today.getMonth() + 1) +
          "-" +
          today.getDate();
        this.startTime = datetime + " 00:00:00";
        this.endTime = datetime + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 3) {
        this.spantime = 3;
        var dateTime = getCurrentWeek();
        this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 4) {
        this.spantime = 4;
        var dateTime = getCurrentMonth();
        this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 5) {
        this.spantime = 5;
        var dateTime = getPreviousMonth();
        this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 6) {
        this.spantime = 6;
        var dateTime = getCurrentSeason();
        this.startTime = dateTime[0];
        this.endTime = dateTime[1];
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 7) {
        this.spantime = 7;
        var dateTime = getCurrentYear();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 8) {
        this.spantime = 8;
        var dateTime = getPreviousYear();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 9) {
        this.spantime = 9;
        if (this.selectTime.length > 0) {
          this.startTime =
            this.selectTime[0].getFullYear() +
            "-" +
            (this.selectTime[0].getMonth() + 1) +
            "-" +
            this.selectTime[0].getDate() +
            " 00:00:00";
          console.log(this.startTime);
          this.endTime =
            this.selectTime[1].getFullYear() +
            "-" +
            (this.selectTime[1].getMonth() + 1) +
            "-" +
            this.selectTime[1].getDate() +
            " 23:59:59";
          console.log(this.endTime);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  font-size: 12px;
  font-family: "微软雅黑";
}
.container {
  padding: 15px;
  position: relative;
}
.header {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
  position: relative;

  .input {
    width: 40% !important;
    padding: 0 5px;
  }
  span:hover {
    cursor: pointer;
  }
}
.advanced-query {
  position: absolute;
  background: white;
  width: 98%;
  z-index: 1000;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  .advanced-query-form {
    padding: 15px;
    width: 100%;
  }
  .input-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    .input-form-label {
      width: 20%;
    }
    .input-form-input {
      width: 80%;
      height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 30px;
      .input-form-in {
        width: 45% !important;
      }

      span {
        padding: 0 5px;
        border-radius: 4px;
        margin-right: 10px;
      }
      span:hover {
        color: #2db7f5;
        cursor: pointer;
      }
      .spanbg {
        background: #2db7f5;
        color: white;
      }
      .spanbg:hover {
        background: #2db7f5;
        color: white;
      }
    }
  }
  .advanced-query-tail {
    padding: 15px;
    display: flex;
    border-top: 1px solid #e2e2e2;
    justify-content: center;
    line-height: 40px;
  }
}
.footer {
  padding-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>